<template>
  <view :style="themeColor">
    <view class="page">
      <view class="flex flex-direction align-stretch benben-position-layout flex home_flex_1"
        :style="{height:(150+StatusBarRpx)+'rpx',paddingTop:StatusBarRpx+'rpx', }">
        <view class='flex align-center justify-between home_fd1_0 '>
          <view class=' flex flex-wrap align-center' @tap.stop="handleJumpDiy" data-type="navigateTo"
            :data-url="`/pages/tabBar/home/choosecity`">
            <text class='home_fd1_0_c0_c0'>{{cityname || '未知'}}</text>
            <image class='home_fd1_0_c0_c1' mode="aspectFit" :src='STATIC_URL+"503.png"'></image>
          </view>
          <view class='flex flex-wrap align-center home_fd1_0_c1' @tap.stop="handleJumpDiy" data-type="navigateTo"
            :data-url="`/pages/sy/search/search`">
            <view class='flex align-center self-center justify-center home_fd1_0_c1_c0'>
              <image class='home_fd1_0_c1_c0_c0' mode="aspectFit" :src='STATIC_URL+"183.png"'></image>
              <text class='home_fd1_0_c1_c0_c1'>请输入</text>
            </view>
          </view>
          <view class='flex flex-wrap align-center home_fd1_0_c1' @tap.stop="handleJumpDiy" data-type="navigateTo"
            :data-url="`/pages/wd/myNews/myNews`">
            <image class='home_fd1_0_c2_c0' mode="aspectFit" :src='STATIC_URL+"504.png"'></image>
            <benben-message-num class='home_fd1_0_c2_c1' :message-num="messageNum" size='20' color='#fff'
              background-color='#FD433C'>
            </benben-message-num>
          </view>
        </view>
      </view>
      <view :style="{height: (150+StatusBarRpx)+'rpx'}"></view>
      <!---flex布局flex布局开始-->
      <view class="flex flex-wrap align-center justify-center benben-flex-layout">
        <view style="position: relative">
          <swiper ref="benbenSwiperfd2_0" @change="bannerIndexfd2_0 = $event.detail.current"
            class='flex position-relative home_fd2_0' previous-margin="0rpx" next-margin="0rpx"
            :display-multiple-items="1" :interval="5000" :duration="500" :autoplay='true' :circular='true'>
            <swiper-item class='flex  home_fd2_0' v-for="(item,index) in bannerList" :key="index">
              <image class='home_fd2_0_c1_c0' mode="aspectFill" :src='item.advPic' @tap.stop="handleJumpDiy"
                data-type="navigateTo" :data-url="item.linkUrl">
              </image>
            </swiper-item>


          </swiper>
          <view style="position: absolute" class="flex dot flex align-center justify-center home_swiperDotfd2_0">
            <template v-for="(item, index) in bannerList">
              <view :key="index" v-if="bannerIndexfd2_0 == index"
                class="flex dot selected flex align-center justify-center home_swiperDotSelectedfd2_0">
              </view>
              <view :key="index" v-else
                class="flex dot unselected flex align-center justify-center home_swiperDotUnselectedfd2_0">
              </view>
            </template>
          </view>
        </view>
      </view>

      <!---flex布局flex布局结束-->
      <!---flex布局flex布局开始-->
      <view class="flex flex-direction flex-wrap align-stretch benben-flex-layout">
        <view class='flex flex-direction flex-wrap align-stretch home_fd3_0'>
          <view style="position: relative">
            <swiper ref="benbenSwiperfd3_0_c2" @change="bannerIndexfd3_0_c2 = $event.detail.current"
              class='flex position-relative home_fd3_0_c2' previous-margin="0rpx" next-margin="0rpx"
              :display-multiple-items="1" :interval="5000" :duration="500" :circular='true'>


              <swiper-item class='flex  home_fd3_0_c2_c1_c0'>
                <view class='flex flex-wrap align-stretch home_fd3_0_c2_c1_c0'>
                  <template v-for='(child,key1) in cateList'>
                    <view class='flex flex-direction flex-wrap align-center self-center justify-center home_fd3_0_c0_c0'
                      @tap.stop="golistFunc(child)" :key='key1'>
                      <image class='home_fd3_0_c2_c1_c0_c0_c0' mode="aspectFill" :src='child.typeIcon'></image>
                      <text class='home_fd3_0_c0_c0_c1'>{{child.typeName}}</text>
                    </view>
                  </template>

                </view>
              </swiper-item>


            </swiper>

          </view>
        </view>
      </view>

      <!---flex布局flex布局结束-->
      <!---flex布局flex布局开始-->
      <view class="flex flex-direction align-stretch benben-flex-layout home_flex_4">
        <!-- <image class='home_fd4_0' mode="aspectFill" :src='adIcon' @tap.stop="handleJumpDiy" data-type="navigateTo"
          :data-url="`/pages/sy/huodongliebiao/huodongliebiao`"></image> -->

        <view class="flex justify-between container-box">
          <image class='img1' mode="aspectFit" @tap.stop="handleJumpDiy" data-type="navigateTo"
            :data-url="`/pages/sy/huodongliebiao/huodongliebiao`" :src='STATIC_URL+"add1.png"'></image>
          <image class='img1' mode="aspectFit" @tap.stop="handleJumpDiy" data-type="navigateTo"
            :data-url="`/pages/sy/questionnaire/Questionnairehome`" :src='STATIC_URL+"add2.png"'></image>
        </view>
        <view class='flex flex-wrap align-center home_fd4_1'>
          <image class='home_fd4_1_c0' mode="aspectFit" :src='STATIC_URL+"499.png"'></image>
          <text class='home_fd4_1_c1'>热门商品</text>
        </view>
        <view class='flex flex-wrap align-center justify-between'>
          <template v-for='(item,key0) in dataList'>
            <view class='flex flex-direction flex-wrap align-stretch home_fd4_2_c0' :key='key0'>

              <image class='home_fd4_2_c0_c0' mode="aspectFill" @tap.stop="goDetail(item)" :src='item.coverPic'></image>
              <text class='flex-sub home_fd4_2_c0_c1'>{{item.comdName}}</text>
              <view class='flex flex-direction align-stretch home_fd4_2_c0_c2'>
                <view class='flex flex-wrap align-center home_fd4_2_c0_c2_c0'>
                  <image class='home_fd4_2_c0_c2_c0_c0' mode="aspectFit" :src='STATIC_URL+"500.png"'></image>
                  <text class='home_fd4_2_c0_c2_c0_c1'>￥{{item.rentPrice}}/月</text>
                </view>
                <view class='flex flex-wrap align-center'>
                  <image class='home_fd4_2_c0_c2_c0_c0' mode="aspectFit" :src='STATIC_URL+"501.png"'></image>
                  <text class='home_fd4_2_c0_c2_c0_c1'>￥{{item.sellPrice}}</text>
                </view>
              </view>
              <view class='flex flex-wrap align-center justify-between home_fd4_2_c0_c3' @tap.stop="handleJumpDiy"
                data-type="navigateTo" :data-url="`/pages/sy/shopdetail/shopdetail?usermerchant_aid=${item.shopIdk}`">
                <text class='home_fd4_2_c0_c3_c0'>{{item.shopName || '暂无'}}</text>
                <view class='flex flex-wrap align-center'>
                  <text class='home_fd4_2_c0_c3_c0'>进店</text>
                  <text class='fu-iconfont2  home_fd4_2_c0_c3_c1_c1'>&#xe7f2;</text>
                </view>
              </view>
            </view>
          </template>

        </view>
      </view>

      <!---flex布局flex布局结束-->


    </view>
  </view>
</template>
<script>
  import {
    validate
  } from '@/common/utils/validate.js'

  export default {
    components: {},

    data() {
      return {
        "bannerIndexfd3_0_c2": 0,
        "bannerIndexfd2_0": 0,
        "popupShow1685609745125": false,
        cateList: [],
        bannerList: [],
        adIcon: '',
        dataList: [],
        messageNum: 0,
        cityname: '',
        cityinfo: {
          lat: '',
          lng: '',
          text: '',
          code: ''
        },
        lat: '',
        lng: ''
      };
    },
    computed: {
      themeColor() {
        return this.$store.getters.themeColor
      },
      isLogin() {
        return this.$store.state.token == '' ? false : true;
      }
    },
    watch: {},
    onLoad(options) {
      if (global.appTabBarType) this.toHomeDiy()
      this.qryAdvPic()
      this.queryRotographFunc()
      this.getListFunc()
      console.log('isLogin', this.isLogin)
      if (this.isLogin) {
        this.queryDetailsFunc()
      }
    },
    onUnload() {

    },
    onReady() {

    },
    onShow() {
      let that = this
      if (uni.getStorageSync('cityinfo')) {
        that.cityinfo = JSON.parse(uni.getStorageSync('cityinfo'))
        that.lat = that.cityinfo.lat
        that.lng = that.cityinfo.lng
        that.cityname = that.cityinfo.text
        console.log('that.citycode', that.region_code)
        this.getListFunc()
      }
    },
    onHide() {

    },
    onResize() {

    },
    onPullDownRefresh() {
      this.queryRotographFunc()
      this.getListFunc()
    },
    onReachBottom(e) {

    },
    onPageScroll(e) {

    },
    methods: {
      async queryDetailsFunc() {
        if (this.isLogin === true) {
          //请求方法
          //数据验证

          let datadataDetails = await this.$api.get(global.apiUrls.getMsgCount, {

          });

          if (datadataDetails.data.code != 0) {
            this.$message.info(datadataDetails.data.msg);
            return
          }
          let infodataDetails = datadataDetails.data;
          this.messageNum = infodataDetails.data.sumMsgCount

        }
      },
      // 跳转详情
      goDetail(item) {
        // if (!this.isLogin) {
        //   // this.$message.info('未登录 请登录')
        //   setTimeout(res => {
        //     uni.navigateTo({
        //       url: `/pages/tabBar/login/login`
        //     })
        //   }, 500)
        //   return;
        // }
        // if (this.isLogin) {
        uni.navigateTo({
          url: `/pages/fl/shopDetail/shopDetail?id=${item.id}`
        })
        // }

      },
      // 页面跳转
      golistFunc(item) {
        // /pages/dlzc/privacyPolicy/zulinzhinan 租赁指南
        // /pages/assemblys/ContactUs/ContactUs 在线客服
        // /pages/syxianxiashop/xianxiashop  线下门店
        // if (!this.isLogin) {
        //   // this.$message.info('未登录 请登录')
        //   setTimeout(res => {
        //     uni.navigateTo({
        //       url: `/pages/tabBar/login/login`
        //     })
        //   }, 500)
        //   return;
        // }
        if (item.typeNum == 1) { //普通商品
          uni.setStorageSync('cateId', item.id)
          uni.switchTab({
            url: `/pages/tabBar/classification/classification`
          })
        } else if (item.typeNum == 2) { //线下门店
          uni.navigateTo({
            url: `/pages/sy/xianxiashop/xianxiashop?city=${this.cityname}&lat=${this.lat}&lng=${this.lng}`
          })
        } else if (item.typeNum == 3) { //租赁指南
          uni.navigateTo({
            url: `/pages/dlzc/privacyPolicy/zulinzhinan`
          })
        } else if (item.typeNum == 4) { //在线客服
          uni.navigateTo({
            url: `/pages/assemblys/ContactUs/ContactUs`
          })
        }
      },
      qryAdvPic() {
        this.$api.get(global.apiUrls.qryAdvPic, {
          advType: 'APP轮播图'
        }).then(res => {
          if (res.data.code == 0) {
            this.bannerList = res.data.data.records
          }
        })
        this.$api.get(global.apiUrls.qryAdvPic, {
          advType: 'APP中间广告'
        }).then(res => {
          if (res.data.code == 0) {
            this.adIcon = res.data.data.records[0].advPic
          }
        })
      },
      //广告跳转
      toLunFunc(href) {
        this.dynamicJump(href);
      },


      //获取fenlei
      async queryRotographFunc() {
        //请求方法
        //数据验证

        this.$api.get(global.apiUrls.getHomeCommodTypes, {

        }).then(res => {
          if (res.data.code == 0) {
            this.cateList = res.data.data
          } else if (res.data.code == 6) {
            this.$store.commit('logout')
            this.$urouter.switchTab(`/pages/tabBar/myhb/myhb`);
          }
        })
        console.log('queryRotographFunc', this.cateList)
      },
      //跳转秒杀商品详情
      seckillShopFunc() {
        this.$urouter.navigateTo(
          `/pages/sy/killMerchandiseDetails/killMerchandiseDetails?goods_id=${this.goods_id}&activity_id=${this.activity_id}&sku_id=${this.sku_id}`
        );
      },

      //积分商城-积分商品列表
      getListFunc() {
        this.$api.get(global.apiUrls.getHomeHotCommods, {
          city: this.cityname,
          latitude: this.lat,
          longitude: this.lng
        }).then(res => {
          if (res.data.code == 0) {
            this.dataList = res.data.data.hotCommods
          } else if (res.data.code == 6) {
            this.$store.commit('logout')
            this.$urouter.switchTab(`/pages/tabBar/myhb/myhb`);
          }
        })

      },
    }
  };
</script>
<style lang="scss" scoped>
  .container-box {
    width: 702rpx;
    margin: 24rpx auto;

    .img1 {
      width: 340rpx;
      height: 200rpx;
    }
  }

  .page {
    width: 100vw;
    overflow-x: hidden;
    min-height: calc(100vh - var(--window-bottom));
    background: url(image-path('545.png')) no-repeat, linear-gradient(180deg, #FFFFFF 0%, #F6F7F9 100%);
    background-size: 100% 100%;
  }

  .home_flex_0 {
    width: 617rpx;
  }

  .home_fd0_1_c0 {
    width: 64rpx;
    height: 64rpx;
    border-radius: 28rpx 28rpx 28rpx 28rpx;
  }

  .home_fd0_1 {
    margin: 48rpx 0rpx 0rpx 0rpx;
  }

  .home_fd0_0_c0_c0_c2 {
    color: #EF0600;
    font-size: 20rpx;
    font-weight: 700;
    line-height: 28rpx;
    width: 30rpx;
  }

  .home_fd0_0_c0_c0_c1_c1_c0_c1_c1 {
    color: rgba(102, 102, 102, 1);
    font-size: 18rpx;
    font-weight: 500;
    line-height: 25rpx;
    -webkit-line-clamp: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
  }

  .home_fd0_0_c0_c0_c1_c1_c0_c1_c0 {
    color: rgba(102, 102, 102, 1);
    font-size: 18rpx;
    font-weight: 500;
    line-height: 25rpx;
  }

  .home_fd0_0_c0_c0_c1_c1_c0_c0 {
    color: var(--benbenFontColor0);
    font-size: 20rpx;
    font-weight: 500;
    line-height: 28rpx;
    -webkit-line-clamp: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    max-width: 200rpx;
    margin: 0rpx 0rpx 8rpx 0rpx;
  }

  .home_fd0_0_c0_c0_c1_c1 {
    margin: 6rpx 0rpx 0rpx 0rpx;
  }

  .home_fd0_0_c0_c0_c1_c0 {
    color: var(--benbenFontColor0);
    font-size: 22rpx;
    font-weight: 600;
    line-height: 30rpx;
    margin: 0rpx 0rpx 6rpx 0rpx;
  }

  .home_fd0_0_c0_c0_c1 {
    margin: 24rpx 0rpx 20rpx 16rpx;
  }

  .home_fd0_0_c0_c0_c0_c1_c0 {
    color: var(--benbenFontColor0);
    font-size: 18rpx;
    font-weight: 400;
    line-height: 28rpx;
  }

  .home_fd0_0_c0_c0_c0_c0_c1 {
    color: var(--benbenFontColor7);
    font-size: 56rpx;
    font-weight: 700;
    line-height: 67rpx;
  }

  .home_fd0_0_c0_c0_c0_c0_c0 {
    color: var(--benbenFontColor7);
    font-size: 24rpx;
    font-weight: 700;
    line-height: 33rpx;
    margin: 12rpx 0rpx 0rpx 0rpx;
  }

  .home_fd0_0_c0_c0_c0 {
    width: 140rpx;
  }

  .home_fd0_0_c0_c0 {
    background: url(image-path('5.png')) no-repeat;
    background-size: 100% auto;
    padding: 0rpx 14rpx 0rpx 0rpx;
    margin: 0rpx 0rpx 24rpx 0rpx;
    width: 481rpx;
  }

  .home_fd0_0_c0 {
    touch-action: none;
    width: 481rpx;
    height: 350rpx;
  }

  .home_fd0_0 {
    background: url(image-path('4.png')) no-repeat;
    background-size: 100% 100% !important;
    padding: 294rpx 68rpx 0rpx 69rpx;
  }

  .home_flex_1 {
    // background: url(image-path('545.png')) no-repeat;
    // background-color: #FFFFFF;
    width: 750rpx;
    height: 150rpx;
    overflow: hidden;
    z-index: 10;
    top: 0rpx;
    background-size: 100% auto !important;
  }

  .home_fd1_0_c2_c1 {
    position: absolute;
    top: -6rpx;
    right: 10rpx;
  }

  .home_fd1_0_c2_c0 {
    width: 46rpx;
    height: 45rpx;
    border-radius: 0rpx 0rpx 0rpx 0rpx;
    margin: 0rpx 24rpx 0rpx 24rpx;
  }

  .home_fd1_0_c1_c0_c1 {
    font-size: 28rpx;
    color: var(--benbenFontColor1);
    width: 300rpx;
    margin: 0rpx 0rpx 0rpx 12rpx;
  }

  .home_fd1_0_c1_c0_c0 {
    width: 24rpx;
    height: 24rpx;
    border-radius: 0rpx 0rpx 0rpx 0rpx;
  }

  .home_fd1_0_c1_c0 {
    background: var(--benbenbgColor1);
    border-radius: 32rpx 32rpx 32rpx 32rpx;
    padding: 0rpx 24rpx 0rpx 24rpx;
    height: 52rpx;
  }

  .home_fd1_0_c1 {
    position: relative;
  }

  .home_fd1_0_c0_c1 {
    width: 32rpx;
    height: 32rpx;
    border-radius: 0rpx 0rpx 0rpx 0rpx;
    margin: 0rpx 016rpx 0rpx 0rpx;
  }

  .home_fd1_0_c0_c0 {
    color: #333;
    font-size: 32rpx;
    font-weight: 600;
    line-height: 45rpx;
    margin-right: 10rpx
  }

  .home_fd1_0 {
    margin: 32rpx 0rpx 24rpx 0rpx;
    padding: 0rpx 32rpx 0rpx 32rpx;
  }

  .home_numberfd2_0_c0 {
    background: #525050;
    position: absolute;
    bottom: 20rpx;
    right: 30rpx;
    width: 80rpx;
    height: 40rpx;
    border-radius: 6rpx 6rpx 6rpx 6rpx;
    font-size: 24rpx;
    color: #FFFFFF;
    line-height: 46rpx;
    font-weight: 400;
  }

  .home_fd2_0_c1_c0 {
    width: 702rpx;
    height: 359rpx;
    border-radius: 16rpx 16rpx 16rpx 16rpx;
  }

  .home_fd2_0 {
    width: 702rpx;
    height: 359rpx;
    overflow: hidden;
  }

  .home_swiperDotUnselectedfd2_0 {
    border: 2px solid var(--benbenbdColor5);
    width: 14rpx;
    height: 14rpx;
    border-radius: 100rpx 100rpx 100rpx 100rpx;
    margin: 0rpx 6rpx 0rpx 0rpx;
    font-size: 24rpx;
    color: #fff;
  }

  .home_swiperDotSelectedfd2_0 {
    border: 2px solid var(--benbenbdColor1);
    width: 14rpx;
    height: 14rpx;
    border-radius: 100rpx 100rpx 100rpx 100rpx;
    margin: 0rpx 6rpx 0rpx 0rpx;
    font-size: 24rpx;
    color: #fff;
  }

  ::v-deep .home_swiperDotfd2_0 {
    position: absolute;
    bottom: 20rpx;
    left: 0rpx;
    right: 0rpx;
  }

  .home_numberfd3_0_c2_c0 {
    background: #525050;
    position: absolute;
    bottom: 20rpx;
    right: 30rpx;
    width: 80rpx;
    height: 40rpx;
    border-radius: 6rpx 6rpx 6rpx 6rpx;
    font-size: 24rpx;
    color: #FFFFFF;
    line-height: 46rpx;
    font-weight: 400;
  }

  .home_fd3_0_c2_c1_c0_c0_c0 {
    width: 100rpx;
    height: 100rpx;
    border-radius: 50rpx;
  }

  .home_fd3_0_c2_c1_c0 {
    width: 686rpx;
    height: 360rpx;
  }

  .home_fd3_0_c2 {
    width: 686rpx;
    height: 360rpx;
    margin: 0rpx 0rpx 0rpx 0rpx;
  }

  .home_swiperDotUnselectedfd3_0_c2 {
    background: rgba(238, 238, 238, 1);
    width: 30rpx;
    height: 6rpx;
    border-radius: 0rpx 0rpx 0rpx 0rpx;
    font-size: 24rpx;
    color: #fff;
  }

  .home_swiperDotSelectedfd3_0_c2 {
    background: var(--benbenbgColor0);
    width: 30rpx;
    height: 6rpx;
    border-radius: 0rpx 0rpx 0rpx 0rpx;
    font-size: 24rpx;
    color: #fff;
  }

  ::v-deep .home_swiperDotfd3_0_c2 {
    position: absolute;
    bottom: 10rpx;
    left: 0rpx;
    right: 0rpx;
  }

  .home_fd3_0_c1_c0_c0 {
    background: #B82441;
    border-radius: 3rpx 3rpx 3rpx 3rpx;
    width: 30rpx;
    height: 6rpx;
  }

  .home_fd3_0_c1_c0 {
    border-radius: 3rpx 3rpx 3rpx 3rpx;
    width: 60rpx;
    height: 6rpx;
  }

  .home_fd3_0_c1 {
    margin: 16rpx 0rpx 12rpx 0rpx;
  }

  .home_fd3_0_c0_c0_c1 {
    color: var(--benbenFontColor0);
    font-size: 24rpx;
    font-weight: 500;
    line-height: 33rpx;
    margin: 8rpx 0rpx 0rpx 0rpx;
  }

  .home_fd3_0_c0_c0_c0 {
    width: 100rpx;
    height: 100rpx;
    border-radius: 50rpx;
    margin: 0rpx 0rpx 10rpx 0rpx;
  }

  .home_fd3_0_c0_c0 {
    width: 25%;
    height: 160rpx;
  }

  .home_fd3_0 {
    background: #FFFFFF;
    border-radius: 32rpx 32rpx 0rpx 0rpx;
    padding: 12rpx 32rpx 0rpx 32rpx;
  }

  .home_flex_4 {
    padding: 0rpx 24rpx 0rpx 24rpx;
  }

  .home_fd4_2_c0_c3_c1_c1 {
    font-size: 22rpx;
    color: var(--benbenFontColor1);
  }

  .home_fd4_2_c0_c3_c0 {
    color: var(--benbenFontColor1);
    font-size: 24rpx;
  }

  .home_fd4_2_c0_c3 {
    background: rgba(246, 246, 246, 1);
    padding: 6rpx;
    border-radius: 44rpx;
    background-size: 100% auto;
    width: 300rpx;
    margin: 12rpx auto 0rpx auto;
  }

  .home_fd4_2_c0_c2_c0_c1 {
    color: rgba(217, 50, 32, 1);
    font-weight: 600;
  }

  .home_fd4_2_c0_c2_c0_c0 {
    width: 32rpx;
    height: 32rpx;
    margin: 0rpx 10rpx 0rpx 0rpx;
  }

  .home_fd4_2_c0_c2_c0 {
    margin: 12rpx 0rpx 12rpx 0rpx;
  }

  .home_fd4_2_c0_c2 {
    margin: 0rpx 20rpx 0rpx 20rpx;
  }

  .home_fd4_2_c0_c1 {
    font-size: 28rpx;
    font-weight: 500;
    color: rgba(51, 51, 51, 1);
    margin: 0rpx 20rpx 0rpx 20rpx;
    -webkit-line-clamp: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
  }

  .home_fd4_2_c0_c0 {
    width: 346rpx;
    height: 346rpx;
    border-radius: 16rpx 16rpx 16rpx 16rpx;
    margin: 0rpx 0rpx 24rpx 0rpx;
  }

  .home_fd4_2_c0 {
    background: #fff;
    background-size: 100% auto !important;
    border-radius: 16rpx 16rpx 16rpx 16rpx;
    padding: 0rpx 0rpx 22rpx 0rpx;
    margin: 0rpx 0rpx 8rpx 0rpx;
    width: 346rpx;
  }

  .home_fd4_1_c1 {
    margin: 0rpx 24rpx 0rpx 0rpx;
    font-size: 36rpx;
    font-weight: 700;
    color: rgba(51, 51, 51, 1);
  }

  .home_fd4_1_c0 {
    width: 34rpx;
    height: 34rpx;
    border-radius: 0rpx 0rpx 0rpx 0rpx;
    margin: 0rpx 14rpx 0rpx 0rpx;
  }

  .home_fd4_1 {
    padding: 32rpx 0rpx 32rpx 0rpx;
  }

  .home_fd4_0 {
    width: 702rpx;
    height: 160rpx;
    border-radius: 0rpx 0rpx 0rpx 0rpx;
  }
</style>
